<template>
  <div class="formPrint">
    <div class="topbar">
      <div class="title">资产维修</div>
      <button type="button" class="printBtn el-button el-button--primary el-button--mini" @click="handlePrint">
        <span>打印</span>
      </button>
    </div>
    <div class="printBody">
      <div id="printForm">
        <table class="documentInfo" id="print-container">
          <tr>
            <td colspan="2" class="columnTitle">
              <div>单据信息</div>
              <div class="underline"></div>
            </td>
          </tr>
          <tr>
            <td class="label">单据编号</td>
            <td class="value">ZCCL2024041100001</td>
          </tr>
          <tr>
            <td class="label">报修人</td>
            <td class="value">欧科</td>
          </tr>
          <tr>
            <td class="label">报修部门</td>
            <td class="value">总经办</td>
          </tr>
          <tr>
            <td class="label">报修时间</td>
            <td class="value">2024-08-31</td>
          </tr>
          <tr>
            <td class="label">预计维修费用</td>
            <td class="value">-</td>
          </tr>
          <tr>
            <td class="label">实际维修费用</td>
            <td class="value">-</td>
          </tr>
          <tr>
            <td class="label">维修内容</td>
            <td class="value">电容坏了</td>
          </tr>
          <tr>
            <td class="label">备注</td>
            <td class="value">-</td>
          </tr>
        </table>
        <table class="assetList">
          <tr>
            <td colspan="5" class="columnTitle">
              <div>资产列表</div>
              <div class="underline"></div>
            </td>
          </tr>
          <tr>
            <td class="label">资产名称</td>
            <td class="label">型号</td>
            <td class="label">数量</td>
            <td class="label">单价</td>
            <td class="label">金额</td>
          </tr>
          <tr v-for="asset in assets" :key="asset.name">
            <td class="value">{{ asset.name }}</td>
            <td class="value">{{ asset.model }}</td>
            <td class="value">{{ asset.quantity }}</td>
            <td class="value">{{ asset.unitPrice }}</td>
            <td class="value">{{ asset.amount }}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>

import print from 'print-js'
export default {
  setup() {
    const assets = ref([
      { name: '电脑', model: '联想小新', quantity: '1', unitPrice: '5000', amount: '5000' },
      { name: '显示器', model: '戴尔U2419H', quantity: '1', unitPrice: '2000', amount: '2000' },
    ]);

    function open() {
  openFlag.value = true;
}
function handlePrint() {

  print({
    printable: 'print-container',
    type: 'html',
    scanStyles: true,
    targetStyles: ['*']
  });

}
  
    return {
      assets,
      handlePrint,
      open
    };
  },
};
</script>

<style scoped>
.formPrint {
  padding: 20px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
}

.printBtn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #007BFF;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.3s;
}

.printBtn:hover {
  background-color: #0056b3;
}

@media print {
.printBtn {
    display: none;
  }
}

.documentInfo,
.assetList {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.documentInfo th,
.documentInfo td,
.assetList th,
.assetList td {
  border: 1px solid #dddddd;
  padding: 8px;
  text-align: left;
}

.documentInfo th,
.assetList th {
  background-color: #f2f2f2;
  font-weight: bold;
  color: #333333;
}

.documentInfo td,
.assetList td {
  color: #666666;
}
</style>